import React, { useEffect, useState } from 'react'
import { Image } from 'antd'

import { Input, Space, Col, Row, Button } from 'antd';
import request, { baseUrl } from '../../utils/request'
import { useNavigate } from 'react-router-dom'
import './First.css'





const { Search } = Input;
function First() {
    const navigate = useNavigate()
    const onSearch = (value) => {
        navigate('/search/?kw=' + value)
        // console.log(value)
        // request({
        //     url:'/list/search',
        //     params:{
        //         kw:value
        //     }
        // }).then(res=>{
        //     console.log(res);
        // })
    }

    // 发送ajax请求，获取数据

    const [newlist, setNewlist] = useState([])
    useEffect(() => {
        request.get('/list/search', {
            params: {
                size: 12,
            }
        }).then(({
            data
        }) => {
            console.log('data', data.movielist.data)
            setNewlist(data.movielist.data)
        })


    }, [])
    const style = {
        background: '#0092ff',
        padding: '8px 0',
        maxLength: '500 px',
    };
    const [size, setSize] = useState('large');

    return <>
        <Space direction="vertical">

            <Search placeholder="搜索你喜欢的影片、演员、导演" enterButton onSearch={onSearch}
                style={{
                    width: '600px',
                    height: '200px',
                    marginTop: '200px'
                }} />
        </Space>
        <h1>首页</h1>
        <Row style={{
            marginLeft: '40px',
            marginRight: '40px',
        }} justify="space-evenly">
            {
                newlist.map(item => {
                    return <Col className="gutter-row" span={4} key={item.movieID} >

                        <img onClick={() => {
                            navigate(`/detail/?movieID=${item.movieID}`)
                        }} src={baseUrl + '/imgs/' + item.imgNames} width="90%" height={'280px'} className='yyy' />

                        {/* <Image src={baseUrl + '/imgs/' + item.imgNames} width="90%"  height={'280px'} className='qqq' /> */}
                        <div className='abc'>{item.title}</div>

                    </Col>
                })
            }


            <Button shape="round" className='aaa'>
                最近更新》
            </Button>


        </Row>

    </>

}





export default First;